<div class="quick-menu" [class.show]="quickMenu" (click)="quickMenu=!quickMenu">
    <div class="quick-menu-inner">
        <div class="settings-ctrl">
            <i class="anticon anticon-question-circle-o"></i>
        </div>
        <div class="list-group list-group-flush">
            <a (click)="msg.info('item 1')" class="list-group-item">How do i create account?</a>
            <a (click)="msg.info('item 2')" class="list-group-item">How do i create account?</a>
            <a (click)="msg.info('item 3')" class="list-group-item">How do i create account?</a>
            <a (click)="msg.info('item 4')" class="list-group-item">How do i create account?</a>
            <a (click)="msg.info('item 5')" class="list-group-item">How do i create account?</a>
        </div>
    </div>
</div>
<div nz-row nzGutter="16">
    <!--第一大块左部-->
    <div nz-col nzXs="24" nzSm="7" nzMd="7" nzLg="6" nzXl="6" class="padding-left-right-5px">
        <nz-card [nzBordered]="false" nzNoPadding class="support-card-container">
            <div nz-col nzXs="24" nzMd="24" class="padding-left-right-5px" style="height: 150px">
                <div class="support-title-container">
                    <div class="support-title">
                        近期赞助
                    </div>
                    <div class="support-more">
                        查看更多>>
                    </div>
                </div>
                <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'"
                     class="bg-grey-lighter-h point"
                     *ngFor="let item of recentSupportList">
                    <div nz-col [nzSpan]="24">
                        <div class="support-container">
                            <div class="support-name">{{item.name}}</div>
                            <div class="support-amount">获得{{item.amount}}元赞助</div>
                        </div>
                    </div>
                </div>
            </div>


            <div nz-col nzXs="24" nzMd="24" class="padding-left-right-5px">
                <div class="apply-support-container">
                    <span class="short-bold-line"></span>
                    <div class="apply-title-container">
                        <div class="apply-icon" style="width: 8%"><i class="anticon anticon-clock-circle-o"></i></div>
                        <div class="apply-name" style="width: 27%;min-width: 40px">{{apply.name}}</div>
                        <div class="apply-amount" style="width: 65%">
                            <div class="apply-name" style="min-width: 60px;font-size: 0.8rem">发布赞助</div>
                            <div class="apply-icon">￥{{apply.amount}}元</div>
                        </div>
                    </div>
                    <div class="apply-button-container">
                        <button id="apply-button">
                            <a [routerLink]="['/sponsor/spon']">我要申请赞助</a>
                        </button>
                    </div>
                </div>
            </div>
            <div nz-col nzXs="24" nzMd="24" nzGutter="5" class="border-top padding-left-right-5px">
                <div class="support-help-container">
                    <div class="support-help-card">
                        <div class="support-help-img-container">
                            <img class="support-help-img" src="./assets/img/logo.svg"/>
                        </div>
                        <div class="support-help-content">
                            <div class="support-help-title">
                                拉赞助指导
                            </div>
                            <div class="support-help-body">
                                辛易学院提供专业的拉赞助技巧，免费提供上百种类型活动方案。
                            </div>
                        </div>
                    </div>
                    <div class="support-help-footer">
                        去辛易学院看看>>
                    </div>
                </div>
            </div>

        </nz-card>
    </div>

    <!--第一大块头中部-->
    <div nz-col nzXs="24" nzSm="10" nzMd="10" nzLg="12" class="padding-left-right-5px">
        <nz-card id="nz-carousel" [nzBordered]="false" nzNoPadding>
            <div>
                <nz-carousel nzAutoPlay>
                    <div nz-carousel-content *ngFor="let index of array"
                         style="display: flex;justify-content: center;align-items: center">
                        <img class="play-img" src="{{index}}"/>
                    </div>
                </nz-carousel>
            </div>
        </nz-card>
    </div>

    <!--第一大块右部-->
    <div nz-col nzXs="24" nzSm="7" nzMd="7" nzLg="6" class="padding-left-right-5px">
        <nz-card [nzBordered]="false" nzNoPadding class="support-card-container">
            <div nz-col nzXs="24" nzMd="24" class="padding-left-right-5px">
                <div class="together-container">
                    <div class="together-title-container">
                        <div class="together-title-word">入驻企业</div>
                        <div class="together-title-word together-title-color-word">2336</div>
                        <div class="together-title-word">家</div>
                    </div>
                    <div class="together-description">
                        <span class="overFlow">校园推广价格实惠、提供效果监控</span>
                    </div>
                </div>
            </div>
            <div nz-col nzXs="24" nzMd="24" class="padding-left-right-5px">
                <div class="together-container">
                    <div class="together-title-container">
                        <div class="together-title-word">入驻社团</div>
                        <div class="together-title-word together-title-color-word">17320</div>
                        <div class="together-title-word">个</div>
                    </div>
                    <div class="together-description">
                        <span class="overFlow">轻松快捷、足不出户拉赞助</span>
                    </div>
                </div>
            </div>
            <div nz-col nzXs="24" nzMd="24" nzNoPadding class="padding-left-right-5px" style="height: 150px">
                <div class="support-title-container">
                    <div class="support-title">
                        近期合作
                    </div>
                    <div class="support-more">
                        查看更多>>
                    </div>
                </div>
                <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'"
                     class="bg-grey-lighter-h point"
                     *ngFor="let item of recentTogetherList">
                    <div nz-col [nzSpan]="24">
                        <div class="together-person-container">
                            <div class="together-person">{{item.A}}</div>
                            <div class="together-word">和</div>
                            <div class="together-person">{{item.B}}</div>
                            <div class="together-word">达成合作</div>
                        </div>
                    </div>
                </div>
            </div>
        </nz-card>
    </div>
</div>

<!--第二大块-->
<div class="business-title-container" nz-col nzXs="24" nzSm="17" nzMd="17" nzLg="18">
    <div class="business-title">企业赞助</div>
    <div class="business-title-more">
        <a style="z-index: 10" [routerLink]="['/sponsor/spon']">更多>></a>
    </div>
</div>
<div nz-row nzGutter="16" style="height: 510px">
    <!--宽屏显示为表格-->
    <div nz-col nzXs="24" nzSm="17" nzMd="17" nzLg="18" class="padding-left-right-5px display-none-smaller-Sm">
        <nz-card [nzBordered]="false" nzNoPadding class="business-card">
            <div class="list-head-container">
                <div class="list-head-title">标题</div>
                <div class="list-head-word">地区</div>
                <div class="list-head-word">时间</div>
                <div class="list-head-word">类型</div>
                <div class="list-head-word">金额</div>
            </div>
            <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'"
                 class="py-sm bg-grey-lighter-h point border-top display-none-smaller-Sm"
                 *ngFor="let item of todoData">
                <div class="business-list-container">
                    <div class="list-content-title">
                        <div nz-col [nzSpan]="6" class="text-center">
                            <nz-avatar [nzSrc]="'./assets/img/' + item.avatar + '.png'" [nzSize]="'large'"></nz-avatar>
                        </div>
                        <div nz-col [nzSpan]="18">
                            <p class="list-topic overFlow">{{item.content}}</p>
                        </div>
                    </div>

                    <div class="list-content-word">
                        广东-广州市
                    </div>
                    <div class="list-content-time-container">
                        <div class="list-content-time">
                            2018-01-25
                        </div>
                        <div class="list-content-time">
                            至
                        </div>
                        <div class="list-content-time">
                            2019-01-01
                        </div>

                    </div>
                    <div class="list-content-word">
                        创业营销
                    </div>
                    <div class="list-content-word">
                        ￥30000
                    </div>

                </div>
            </div>
        </nz-card>
    </div>
    <!--窄屏显示为卡片-->
    <div nz-col nzXs="24" class="padding-left-right-5px list-to-card-container display-none-bigger-Sx">
        <nz-card [nzBordered]="false" nzNoPadding class="business-card">
            <ng-container *ngFor="let item of todoData">
                <div class="list-to-card-one border-bottom hover">
                    <div class="list-to-card-title">
                        <div nz-col [nzSpan]="6" class="text-center">
                            <nz-avatar [nzSrc]="'./assets/img/' + item.avatar + '.png'" [nzSize]="'large'"></nz-avatar>
                        </div>
                        <div nz-col [nzSpan]="18">
                            <p class="list-topic overFlow">{{item.content}}</p>
                        </div>
                    </div>
                    <div class="list-to-card-content">
                        <div class="list-to-card-word list-to-card-word2"><strong>地区：</strong>云南昆明</div>
                        <div class="list-to-card-word"><strong>时间：</strong>2017-10-31~2017-12-37</div>
                        <div class="list-to-card-word list-to-card-word2"><strong>类型：</strong>创业营销</div>
                        <div class="list-to-card-word"><strong>金额：</strong>￥10000</div>
                    </div>
                </div>
            </ng-container>
        </nz-card>
    </div>


    <div nz-col nzXs="24" nzSm="7" nzMd="7" nzLg="6" class="padding-left-right-5px dynamic-title-card">
        <div class="dynamic-title-container">
            <div class="business-dynamic-title">最新赞助动态</div>
            <div class="business-dynamic-more">查看更多>></div>
        </div>
        <nz-card [nzBordered]="false" nzNoPadding class="business-card">
            <div nz-col nzXs="24" nzMd="24" nzLg="24" class="padding-left-right-5px">
                <div class="dynamic-list-head-container">
                    <div class="dynamic-list-head-word" style="width: 44%;">赞助</div>
                    <div class="dynamic-list-head-word" style="width: 25%;">金额</div>
                    <div class="dynamic-list-head-word" style="width: 16%;">申请</div>
                    <div class="dynamic-list-head-word" style="width: 15%;">合作</div>
                </div>
                <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'"
                     class="py-sm bg-grey-lighter-h point border-top"
                     *ngFor="let item of todoData">
                    <div class="business-list-container">
                        <div class="list-content-title-right dynamic-list-content-word overFlow"
                             style="width: 44%">
                            大型活动冠名赞助
                        </div>

                        <div class="list-content-word dynamic-list-content-word overFlow" style="width: 25%;">
                            ￥10000
                        </div>
                        <div class="list-content-word dynamic-list-content-word" style="width: 16%;">
                            10
                        </div>
                        <div class="list-content-word dynamic-list-content-word" style="width: 15%;">
                            1
                        </div>

                    </div>
                </div>
            </div>
        </nz-card>
    </div>

</div>

<!--广告位-->
<div class="ads-container">
    <div class="ads">
        <img class="ads-image" src="./assets/img/logo.svg">
    </div>
    <div class="ads">
        <img class="ads-image" src="./assets/img/logo.svg">
    </div>
    <div class="ads">
        <img class="ads-image" src="./assets/img/logo.svg">
    </div>
    <div class="ads">
        <img class="ads-image" src="./assets/img/logo.svg">
    </div>
</div>

<!--第三大块-->
<div class="business-title-container" nz-col nzXs="24" nzSm="17" nzMd="17" nzLg="18">
    <div class="business-title">校园活动</div>
    <div class="business-title-more">
        <a style="z-index: 10" [routerLink]="['/activity/act-list']">更多>></a>
    </div>
</div>
<div nz-row nzGutter="16" style="height: 510px">
    <!--宽屏显示为表格-->
    <div nz-col nzXs="24" nzSm="17" nzMd="17" nzLg="18" class="padding-left-right-5px display-none-smaller-Sm">
        <nz-card nzNoPadding class="business-card">
            <div class="list-head-container">
                <div class="list-head-title">标题</div>
                <div class="list-head-word">地区</div>
                <div class="list-head-word">时间</div>
                <div class="list-head-word">类型</div>
                <div class="list-head-word">金额</div>
            </div>
            <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'"
                 class="py-sm bg-grey-lighter-h point border-top"
                 *ngFor="let item of todoData">
                <div class="business-list-container">
                    <div class="list-content-title">
                        <div nz-col [nzSpan]="6" class="text-center">
                            <nz-avatar [nzSrc]="'./assets/img/' + item.avatar + '.png'" [nzSize]="'large'"></nz-avatar>
                        </div>
                        <div nz-col [nzSpan]="18">
                            <p class="list-topic overFlow">{{item.content}}</p>
                        </div>
                    </div>

                    <div class="list-content-word">
                        广东-广州市
                    </div>
                    <div class="list-content-time-container">
                        <div class="list-content-time">
                            2018-01-25
                        </div>
                        <div class="list-content-time">
                            至
                        </div>
                        <div class="list-content-time">
                            2019-01-01
                        </div>

                    </div>
                    <div class="list-content-word">
                        创业营销
                    </div>
                    <div class="list-content-word">
                        ￥30000
                    </div>

                </div>
            </div>
        </nz-card>
    </div>
    <!--窄屏显示为卡片-->
    <div nz-col nzXs="24" class="padding-left-right-5px list-to-card-container display-none-bigger-Sx">
        <nz-card nzNoPadding class="business-card">
            <ng-container *ngFor="let item of todoData">
                <div class="list-to-card-one border-bottom hover">
                    <div class="list-to-card-title">
                        <div nz-col [nzSpan]="6" class="text-center">
                            <nz-avatar [nzSrc]="'./assets/img/' + item.avatar + '.png'" [nzSize]="'large'"></nz-avatar>
                        </div>
                        <div nz-col [nzSpan]="18">
                            <p class="list-topic overFlow">{{item.content}}</p>
                        </div>
                    </div>
                    <div class="list-to-card-content">
                        <div class="list-to-card-word list-to-card-word2"><strong>地区：</strong>云南昆明</div>
                        <div class="list-to-card-word"><strong>时间：</strong>2017-10-31~2017-12-37</div>
                        <div class="list-to-card-word list-to-card-word2"><strong>类型：</strong>创业营销</div>
                        <div class="list-to-card-word"><strong>金额：</strong>￥10000</div>
                    </div>
                </div>
            </ng-container>
        </nz-card>
    </div>

    <div nz-col nzXs="24" nzSm="7" nzMd="7" nzLg="6" class="padding-left-right-5px dynamic-title-card">
        <div class="dynamic-title-container">
            <div class="business-dynamic-title">最近入驻社团</div>
            <div class="business-dynamic-more">查看更多>></div>
        </div>
        <nz-card [nzBordered]="false" nzNoPadding class="">
            <div nz-col nzXs="24" nzMd="24" nzLg="24" class="padding-left-right-5px business-card">
                <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'"
                     class="py-sm bg-grey-lighter-h point border-top"
                     *ngFor="let item of todoData">
                    <div class="business-list-container">
                        <div nz-col [nzSpan]="8" class="organization-img">
                            <nz-avatar [nzSrc]="'./assets/img/' + item.avatar + '.png'" [nzSize]="'large'"></nz-avatar>
                        </div>
                        <div nz-col [nzSpan]="16" class="organization-body">
                            <strong class="organization-description overFlow">{{item.name}}</strong>
                            <p class="organization-description overFlow">{{item.content}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </nz-card>
    </div>

</div>

<!--第四大块-->
<div nz-row nzGutter="16">
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="12" class="padding-left-right-5px">
        <div class="fourth-title-container">
            <div class="fourth-title">辛易学院</div>
            <div class="fourth-title-more">更多>></div>
        </div>
        <nz-card nzNoPadding style="height: 420px">
            <div class="img-card-container" style="margin-top: 0!important;">
                <div class="img-card-img">
                    <img class="img-card-image" src="./assets/img/logo.svg">
                </div>
                <div class="img-card-content">
                    <div class="img-card-title">
                        外联技巧:如何快速建立跟其他组织的联系
                    </div>
                    <div class="img-card-body">
                        2017-09-07 15:20
                    </div>
                </div>
            </div>

            <div class="list-card-container">
                <div class="list-card-one">
                    <span class="list-card-one-icon"></span>
                    <span class="list-card-one-content overFlow">
                       外联技巧培训第五期之策划书技巧
                    </span>
                </div>
                <div class="list-card-one">
                    <span class="list-card-one-icon"></span>
                    <span class="list-card-one-content overFlow">
                       外联技巧培训第五期之策划书技巧
                  </span>
                </div>
                <div class="list-card-one">
                    <span class="list-card-one-icon"></span>
                    <span class="list-card-one-content overFlow">
                       外联技巧培训第五期之策划书技巧
                  </span>
                </div>
                <div class="list-card-one">
                    <span class="list-card-one-icon"></span>
                    <span class="list-card-one-content overFlow">
                       外联技巧培训第五期之策划书技巧
                  </span>
                </div>
                <div class="list-card-one">
                    <span class="list-card-one-icon"></span>
                    <span class="list-card-one-content overFlow">
                       外联技巧培训第五期之策划书技巧
                  </span>
                </div>
                <div class="list-card-one">
                    <span class="list-card-one-icon"></span>
                    <span class="list-card-one-content overFlow">
                       外联技巧培训第五期之策划书技巧
                  </span>
                </div>
            </div>
            <div class="img-card-container border-top">
                <div class="img-card-img">
                    <img class="img-card-image" src="./assets/img/logo.svg">
                </div>
                <div class="img-card-content">
                    <div class="img-card-title">
                        外联技巧:如何快速建立跟其他组织的联系
                    </div>
                    <div class="img-card-body">
                        2017-09-07 15:20
                    </div>
                </div>
            </div>

            <div class="list-card-container">
                <div class="list-card-one">
                    <span class="list-card-one-icon"></span>
                    <span class="list-card-one-content overFlow">
                       外联技巧培训第五期之策划书技巧
                  </span>
                </div>
                <div class="list-card-one">
                    <span class="list-card-one-icon"></span>
                    <span class="list-card-one-content overFlow">
                       外联技巧培训第五期之策划书技巧
                  </span>
                </div>
                <div class="list-card-one">
                    <span class="list-card-one-icon"></span>
                    <span class="list-card-one-content overFlow">
                       外联技巧培训第五期之策划书技巧
                  </span>
                </div>
                <div class="list-card-one">
                    <span class="list-card-one-icon"></span>
                    <span class="list-card-one-content overFlow">
                       外联技巧培训第五期之策划书技巧
                  </span>
                </div>
                <div class="list-card-one">
                    <span class="list-card-one-icon"></span>
                    <span class="list-card-one-content overFlow">
                       外联技巧培训第五期之策划书技巧
                  </span>
                </div>
                <div class="list-card-one">
                    <span class="list-card-one-icon"></span>
                    <span class="list-card-one-content overFlow">
                       外联技巧培训第五期之策划书技巧
                  </span>
                </div>
            </div>
        </nz-card>
    </div>

    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="12" class="padding-left-right-5px">
        <div class="fourth-title-container">
            <div class="fourth-title">校园咨询</div>
            <div class="fourth-title-more">更多>></div>
        </div>
        <nz-card nzNoPadding style="height: 420px">
            <div class="long-img-container">
                <img class="long-img" src="./assets/img/logo.svg">
            </div>
            <div class="long-list-container">
                <div class="long-list-one">
                    <div class="long-list">
                        <span class="list-card-one-icon"></span>
                        <span class="list-card-one-content overFlow">
                       外联技巧培训第五期之策划书技巧
                    </span>
                    </div>
                    <div class="long-list-time">
                        2018-1-31
                    </div>
                </div>
                <div class="long-list-one">
                    <div class="long-list">
                        <span class="list-card-one-icon"></span>
                        <span class="list-card-one-content overFlow">
                       外联技巧培训第五期之策划书技巧
                    </span>
                    </div>
                    <div class="long-list-time">
                        2018-1-31
                    </div>
                </div>
                <div class="long-list-one">
                    <div class="long-list">
                        <span class="list-card-one-icon"></span>
                        <span class="list-card-one-content overFlow">
                       外联技巧培训第五期之策划书技巧
                    </span>
                    </div>
                    <div class="long-list-time">
                        2018-1-31
                    </div>
                </div>
                <div class="long-list-one">
                    <div class="long-list">
                        <span class="list-card-one-icon"></span>
                        <span class="list-card-one-content overFlow">
                       外联技巧培训第五期之策划书技巧
                    </span>
                    </div>
                    <div class="long-list-time">
                        2018-1-31
                    </div>
                </div>
                <div class="long-list-one">
                    <div class="long-list">
                        <span class="list-card-one-icon"></span>
                        <span class="list-card-one-content overFlow">
                       外联技巧培训第五期之策划书技巧
                    </span>
                    </div>
                    <div class="long-list-time">
                        2018-1-31
                    </div>
                </div>
            </div>

            <div class="long-list-container long-img-card-img-container border-top">
                <div class="long-img-card-img">
                    <img class="long-img" style="height: 128px" src="./assets/img/logo.svg">
                </div>
                <div class="long-list-container long-img-card-list">
                    <div class="long-list-one">
                        <div class="long-list long-list2">
                            <span class="list-card-one-icon"></span>
                            <span class="list-card-one-content overFlow">
                       外联技巧培训第五期之策划书技巧
                    </span>
                        </div>
                        <div class="long-list-time display-none-smaller-Sm">
                            2018-1-31
                        </div>
                    </div>
                    <div class="long-list-one">
                        <div class="long-list long-list2">
                            <span class="list-card-one-icon"></span>
                            <span class="list-card-one-content overFlow">
                       外联技巧培训第五期之策划书技巧
                    </span>
                        </div>
                        <div class="long-list-time display-none-smaller-Sm">
                            2018-1-31
                        </div>
                    </div>
                    <div class="long-list-one">
                        <div class="long-list long-list2">
                            <span class="list-card-one-icon"></span>
                            <span class="list-card-one-content overFlow">
                       外联技巧培训第五期之策划书技巧
                    </span>
                        </div>
                        <div class="long-list-time display-none-smaller-Sm">
                            2018-1-31
                        </div>
                    </div>
                    <div class="long-list-one">
                        <div class="long-list long-list2">
                            <span class="list-card-one-icon"></span>
                            <span class="list-card-one-content overFlow">
                       外联技巧培训第五期之策划书技巧
                    </span>
                        </div>
                        <div class="long-list-time display-none-smaller-Sm">
                            2018-1-31
                        </div>
                    </div>
                    <div class="long-list-one">
                        <div class="long-list long-list2">
                            <span class="list-card-one-icon"></span>
                            <span class="list-card-one-content overFlow">
                       外联技巧培训第五期之策划书技巧
                    </span>
                        </div>
                        <div class="long-list-time display-none-smaller-Sm">
                            2018-1-31
                        </div>
                    </div>
                    <div class="long-list-one">
                        <div class="long-list long-list2">
                            <span class="list-card-one-icon"></span>
                            <span class="list-card-one-content overFlow">
                       外联技巧培训第五期之策划书技巧
                    </span>
                        </div>
                        <div class="long-list-time display-none-smaller-Sm">
                            2018-1-31
                        </div>
                    </div>
                </div>

            </div>
        </nz-card>
    </div>

</div>
